<template>
<div>
  <el-card>
    <el-row :gutter="30">
      <el-col :span="8">
        <el-input placeholder="贴子内容" v-model="searchForm.content" ></el-input>
      </el-col>
      <el-col :span="3" style="text-align:right">
        <el-button type="success" icon="el-icon-search" @click="handleSearchPosts" plain>搜索</el-button>
      </el-col>
      <el-col :span="3" style="text-align:right">
        <el-button type="warning" icon="el-icon-refresh-left" @click="handleResetPosts" plain>重置</el-button>
      </el-col>
      <el-col :span="3" style="text-align:right">
        <el-button type="primary" icon="el-icon-plus" @click="handleRelease" plain>发布</el-button>
      </el-col>
      <el-col :span="3" style="text-align:right">
        <el-button type="danger" icon="el-icon-delete" @click="batchDeletePosts" plain>删除</el-button>
      </el-col>
    </el-row>
  </el-card>
  <el-card>
    <el-row>
      <el-table
          stripe
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="datetime"
            label="发布时间"
            width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.datetime) }}
          </template>
        </el-table-column>
        <el-table-column
            prop="content"
            label="内容"
            width="310"
            :formatter="contentFormatter">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="60"
            header-align="center">
          <template slot-scope="scope">
            <div style="display: flex; justify-content: center;">
              <el-button type="danger" plain icon="el-icon-delete" circle size="small" @click="deletePosts(scope.row)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="pageData.currentPage"
          :page-sizes="[4, 8, 12, 16]"
          :page-size=pageData.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total">
      </el-pagination>
    </el-row>
  </el-card>
</div>
</template>

<script>

export default {
  name: "MyPosts",
  data() {
    return {
      tableData: [],
      searchForm: {
        content:''
      },
      pageData:{
        currentPage:1,
        pageSize:4,
        total:0
      },
    };
  },
  created() {
    this.getMyPosts();
  },
  methods: {
    handleSearchPosts() {
      this.pageData.currentPage = 1;
      this.getMyPosts()
    },
    async getMyPosts() {
      const params = {...this.pageData,...this.searchForm, id: sessionStorage.getItem("id")};
      const {data: res} = await this.$axios.get("/posts/getMyPosts", {params})
      this.tableData = res.data.records;
      this.pageData.total = res.data.total;
    },
    deletePosts(row){
      this.$confirm('此操作将永久删除该贴子, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {data:res}=await this.$axios.get("posts/deleteById",{params:{id:row.id}})
        if (res.success){
          this.$message.success('删除成功')
          await this.getMyPosts()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    batchDeletePosts() {
      const selectedRows = this.$refs.multipleTable.selection;
      if (selectedRows.length === 0) {
        this.$message.warning('请选择要删除的贴子');
        return;
      }
      this.$confirm('此操作将永久删除选中的贴子, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const ids = selectedRows.map(row => row.id);
        const { data: res } = await this.$axios.post("posts/batchDeletePosts", ids);
        if (res.success) {
          this.$message.success('删除成功');
          await this.getMyPosts()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    contentFormatter(row){
      return row.content.substring(0,80)+'...'
    },
    handleRelease() {
      this.$router.push({ name: 'release_posts' });
    },
    handleResetPosts(){
      this.searchForm.content = '';
      this.pageData.currentPage = 1;
      this.getMyPosts()
    },
    currentChange(val){
      this.pageData.currentPage=val
      this.getMyPosts()
    },
    sizeChange(val){
      this.pageData.pageSize=val
      this.getMyPosts()
    },
    formatDate(dateString) {
      if (!dateString) {
        return '';
      }
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN', {
        timeZone: 'Asia/Shanghai',
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    },
  }
}
</script>

<style scoped>
.el-pagination{
  margin-top: 10px;
}
</style>